<!--footer组件-->

<template>
  <footer class="footer">
    <div class="footer-item">
      <!--                页脚左边部分-->
      <div class="footer-left">
        <div class="footer_left-conntent">
          <h2 class="footer-h"> 智慧党建</h2>
          <p class="footer-p">2024-2099智慧党建</p>
          <p class="footer-p">渝公网安备000000000000000</p>
        </div>
      </div>

      <!--                中间部分-->
      <div class="footer-middle">
        <p>联系我们</p>
        <p>申请入驻</p>
        <p>反馈建议</p>
      </div>

      <!--                右边部分-->
      <div class="footer-right">
        <ul class="footer-module">
          <li class="footer-list">
            <div class="footer-svg footer-svg-1"></div>
          </li>
          <li class="footer-list">
            <div class="footer-svg footer-svg-2"></div>
          </li>
          <li class="footer-list">
            <div class="footer-svg footer-svg-3"></div>
          </li>
          <li class="footer-list">
            <div class="footer-svg footer-svg-4"></div>
          </li>
          <li class="footer-list">
            <div class="footer-svg footer-svg-5"></div>
          </li>
        </ul>
      </div>
    </div>
  </footer>

</template>

<script setup>

</script>

<style scoped>
/*页脚模块*/
.footer{
  width:100%;
  background-color: black;
  height:15rem;
  padding:2rem 0;
  color:white;
}
.footer-item{
  display: flex;
  height:100%;
  text-align: center;
}
.footer-left{
  width:25%;
  /*background-color: yellow;*/
  position: relative;
  padding-top: 1rem;
  line-height: 3rem;
  border-right: 2px solid rgba(250,250,250,0.7);
}
.footer_left-conntent{
  text-align: center;
}
.footer-h{
  /*position: absolute;*/
}
.footer-middle{
  width:25%;
  padding-top: 1rem;
  border-right: 2px solid rgba(250,250,250,0.7);
  /*background-color:greenyellow;*/
}
.footer-middle p{
  margin-top: 1rem;
}
.footer-right{
  width:50%;
  /*margin-left: 3rem;*/
  padding-top: 2rem;
  /*background-color: red;*/
}

.footer-module{
  display: flex;
  margin-left: 10rem;
}
.footer-list{
  margin-left: 4rem;
  list-style: none;
}
.footer-svg{
  background-repeat: no-repeat;
  width:4rem;
  height:4rem;
}
/*footer.css第57行代码开始*/
.footer-svg-1{
  background: url('/src/assets/svg/qq.svg') no-repeat;
  background-size: 4rem;
}
.footer-svg-2{
  background: url('/src/assets/svg/xiaohongshu.svg') no-repeat;
  background-size: 4rem;
}
.footer-svg-3{
  background: url('/src/assets/svg/wechat.svg') no-repeat;
  background-size: 4rem;
}
.footer-svg-4{
  background: url('/src/assets/svg/bilibili.svg') no-repeat;
  background-size: 4rem;
}
.footer-svg-5{
  background: url('/src/assets/svg/tiktok.svg') no-repeat;
  background-size: 4rem;
}
</style>
